<template>
	<div class="from">
		<van-form>
			<van-field v-model="olPassword" type="password" name="原始密码" label="密码" placeholder="请输入原始密码"  />
			<van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码" />
			<van-field v-model="rePassword" type="password" name="密码" label="密码" placeholder="请再次输入密码"  />
			<div style="margin: 16px;"><van-button round block type="info" native-type="submit" @click="save">保存</van-button></div>
		</van-form>
	</div>
</template>

<script>
import { modinfyPwd } from '../services/user';
import { romoveToken } from '../utils/tools';
export default {
	name: 'UserPwd',
	data() {
		return {
			olPassword: '',
			password: '',
			rePassword: ''
		};
	},
	created() {
		this.save();
	},
	methods: {
		async save() {
			if (this.password) {
				if (this.password == this.rePassword) {
					const res = await modinfyPwd({
						password: this.password,
						oldPassword: this.olPassword
					});
					console.log(res);
					if (res.code == 1) {
						romoveToken();
						this.$router.push({
							name: 'Login'
						});
					} else {
						alert(res.data);
					}
				} else {
					alert('两次输入的密码不一致');
				}
			} else {
				alert('请输入密码');
			}
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
.from {
	margin-top: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	img {
		width: 30vw;
		height: 30vw;
		border-radius: 50%;
	}
}
</style>
